<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>登录页面</title>
    <link rel="icon" href="/img/logo.png" type="image/x-icon"/>
    <link rel="bookmark" href="/img/logo.png" type="image/x-icon"/>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <style>
        body{
            background-color: #2b4b6b;
            height: 100%;
        }

        .login_box{
            height: 300px;
            width: 450px;
            background-color: #fff;
            border-radius: 10px;
            top: 50%;
            left: 50%;
            position: absolute;
            transform: translate(-50%, -50%);

        }

        .avatar_box {
            height: 130px;
            width: 130px;
            border: 1px solid #eee;
            border-radius: 50%;
            padding: 10px;
            box-shadow: 0 0 10px #ddd;
            position: absolute;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: #fff;
        }

        .avatar_box img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background-color: #eee;
        }

        .login_form {
            position: absolute;
            bottom: 30px;
            width: 100%;
            padding: 0 20px;
            box-sizing: border-box;
        }

        .input-item{
            margin-bottom: 20px;
        }

        .input-submit{
            width: 100%;
            transform: translate(50%);
        }

        .input-submit input{
            transform: translate(-50%);
        }

        .input-vercode img{
            position: absolute;
        }

        .input-vercode-text{
            transform: translate(55%);
            margin-bottom: 20px;
        }
    </style>
</head>
<body>

<div class="login_box">
    <div class="avatar_box">
        <img src="/img/logo.png" alt="">
    </div>
    <form action="/login" method="post" class="login_form">
        <div class="input-group input-item">
            <span class="input-group-addon" id="basic-addon1">用户名</span>
            <input name="username" type="text" class="form-control" placeholder="username" aria-describedby="basic-addon1">
        </div>
        <div class="input-group input-item">
            <span class="input-group-addon" id="basic-addon1">密码</span>
            <input name="password" type="text" class="form-control" placeholder="password" aria-describedby="basic-addon1">
        </div>
        <div class="input-group input-vercode">
            <img src="/vercode" alt="">
            <input name="code" type="text" class="form-control input-vercode-text" placeholder="验证码" aria-describedby="basic-addon1">
        </div>
        <div class="input-group input-submit">
            <input type="submit" value="登录" class="btn btn-success"/>
        </div>

    </form>
</div>


</body>
</html>
